<template>
	<view class="all_store" :class="themeName">
		<mescroll-uni ref="store" bgColor="white" top="0" @init="mescrollInit" :up="upOption" @down="downCallback" @up="upCallback">
			<view class="store-container">
				<view v-for="(item, index) in lists" :key="index" class="store-item m-b-20">
					<view class="flex row-between">
						<image class="img" src="@/static/images/coupon_wrap_bg.png" mode=""></image>
						<view class="s-boxs">
							<view class="header-title md bold">{{ item.title }}</view>
							<view class="sm lighter">电话：139558847528</view>
							<view class="sm lighter line-2">店址：颍州区清河路颍州区清河路颍州区清河路颍州区清河路</view>
							<view class="sm lighter">距离：6.7km</view>
						</view>
						<view class="s-go m-l-20" @click.stop="daohang(item.id)">一键导航</view>
					</view>
				</view>
			</view>
			<loading-view v-if="loading"></loading-view>
		</mescroll-uni>
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import { apiNoticeListGet } from '@/api/store.js';
export default {
	mixins: [MescrollMixin],
	name: 'AllStore',
	data() {
		return {
			searchName: '',
			loading: true,
			type: '',
			lists: [
			
			],
			upOption: {
				auto: true, // 不自动加载
				noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: '/static/images/empty/gift.png',
					tip: '暂无门店', // 提示
					fixed: true,
					top: '200rpx'
				}
			}
		};
	},

	methods: {
		// 下拉刷新
		downCallback() {
			this.upCallback({
			    num: 1,
			    size: 10
			});
		},
		// 上拉加载
		upCallback({ num, size }) {
			apiNoticeListGet({
				page_no: num,
				page_size: size
			})
				.then((res) => {
					if (num == 1) this.lists = []; //如果是第一页需手动置空列表
					this.lists = this.lists.concat(res.lists); //追加新数据
					this.mescroll.endSuccess(res.lists.length, res.count);
					setTimeout(() => {
						this.loading = false;
					}, 500);
				})
				.catch((err) => {
					ref.endBySize();
				});
		},
		// 导航
		daohang(id){
			
		},
	},
	
	created() {
	
	}
};
</script>
<style lang="scss">
.search-container {
	display: flex;
	flex-direction: column;
}
.search-input {
	display: flex;
	align-items: center;
	height: 100rpx;
	padding: 0 20rpx;
	background-color: #ffffff;
	position: relative;
	z-index: 2;
}
.store-container {
	position: relative;
	z-index: 1;
	background-color: white;
	
	.store-item {
		padding: 20rpx 30rpx;
		border-radius: 10rpx;

		.img {
			width: 130rpx;
			height: 130rpx;
			margin-right: 20rpx;
		}
		.s-boxs{
			flex: 1;
			line-height: 36rpx;
			
			.line-2{
				-webkit-line-clamp: 1;
			}
		}
		.s-go{
			white-space: nowrap;
			color: #0980CC;
			font-size: 28rpx;
		}
	}
}

</style>